<template>
  <div id="Login">
    <van-nav-bar title="登录页面" left-text="返回" left-arrow @click-left="$router.go(-1)" />

    <div class="logina">
      <input type="text" v-model.trim="user" placeholder="请输入用户名" />
      <input type="text" v-model.trim="pass" placeholder="请输入密码" />
      <button @click="register">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      user: "",
      pass: ""
    };
  },
  methods: {
    //点击登录
    register() {
      if (this.user == "" || this.pass == "") {
        this.$toast("账号和密码不能为空");
        return false;
      }
      let val = this.user;
      let pass = this.pass;
      let req = /^1[3578]\d{9}$/;
      if (req.test(val) == false) {
        this.$toast("账号错误");
      }

      let fromdata = new FormData();
      fromdata.append("mobile", this.user);
      fromdata.append("pwd", this.pass);

      this.$axios
        .post(
          "https://api.it120.cc/small4/user/m/login?deviceId=007&deviceName=monkey",
          fromdata
        )
        .then((res) => {
          if (res.code != 0) {
            this.$toast.fail(res.msg);
            return false;
          }
          res.data.mobile = this.user;
          localStorage.setItem("lativ", JSON.stringify(res.data));

          this.$router.go(-1);
        })
        .catch(err => {
          console.error(err);
        });
    },
    //账号失去焦点
    testuser() {}
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {}
};
</script>
<style scoped lang="scss">
/* @import url(); 引入css类 */
#Login {
  width: 100%;
  .logina {
    width: 90%;
    margin-left: 5%;
    padding: 0.5rem;
    box-sizing: border-box;
    margin-top: 0.2rem;
    border-radius: 0.2rem;
    border: 0.01rem solid rgb(228, 228, 228);
    input {
      width: 100%;
      height: 0.8rem;
      padding-left: 0.2rem;
      box-sizing: border-box;
      border-radius: 0.4rem;
      margin-bottom: 0.2rem;
      border: 0.01rem solid rgb(228, 228, 228);
    }
    button {
      width: 100%;
      height: 0.8rem;
      line-height: 0.8rem;
      color: white;
      background: red;
    }
  }
}
</style>